<template>
    <div id="intellect-push">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>智能推送</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <div class="card-box">
                <div class="card-box-item" v-for="(item,index) in listData" :key="index">
                    <el-card>
                        <div slot="header" class="clearfix">
                            <span>{{item.type_name}}</span>
                            <el-switch
                                    style="float: right; padding: 3px 0"
                                    active-value="1" inactive-value="0"
                                    v-model="item.status"
                                    active-color="#13ce66"
                                    inactive-color="#DCDFE6"
                                    @change="chooseSwitch(item)">
                            </el-switch>
                        </div>
                        <div class="card-box-bottom">
                            <p class="hint">{{item.explain}}</p>
                            <img :src="item.image" alt="" class="bottom-img">
                            <p class="remark">{{item.remark}}</p>
                        </div>
                    </el-card>
                    <el-footer v-if="index===1||index===2">
                        <el-button type="primary" size="small" @click="edit(item.id)">编辑</el-button>
                    </el-footer>
                </div>
            </div>
        </el-card>
        <el-dialog title="编辑" :width="this.$store.state.dialogWidth" :visible.sync="visible">
            <div class="editBox">
                <div class="title">{{formData.title}} <span class="el-icon-edit" style="cursor: pointer"
                                                            @click="editTitle"></span>
                </div>
                <div>{{formData.content}}</div>
                <div class="editImg-box">
                    <img :src="formData.image" alt="">
                    <el-button type="primary" size="small" @click="chooseNewImg">选择图片</el-button>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="dialogAffirm" size="small">确 定</el-button></span>
        </el-dialog>
        <el-dialog title="选择标题" :width="this.$store.state.dialogWidth" :visible.sync="textVisible">
            <el-form ref="form" :label-width="this.$store.state.labelWidth" size="small">
                <el-form-item label="选择标题"
                              :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-select v-model="form.title" placeholder="选择标题"
                               :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''"
                               style="width: 100%">
                        <el-option :label="item.title" :value="item.title" v-for="(item,index) in chooseTitleList"
                                   :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="简述">
                    <el-input v-model="form.content"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="textVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="dialogAffirm1" size="small">确 定</el-button></span>
        </el-dialog>
        <el-dialog title="选择图片" width="50%" :visible.sync="visibleImg">
            <ul class="choose-img">
                <li v-for="(item,index) in imgList" :key="index" @click="chooseImage(item.pic)"><img :src="item.pic"
                                                                                                     alt=""></li>
            </ul>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visibleImg = false" size="small">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
  export default {
    name: "intellect-push",
    data() {
      return {
        listData: [],
        visible: false,
        textVisible: false,
        visibleImg: false,
        formData: {
          status: '',
          title: '',
          content: '',
          image: '',
        },
        form: {
          title: '',
          content: '',
        },
        chooseTitleList: [],
        imgList: [],
      }
    },
    created() {
      this.getData();
      this.getData2();
    },
    methods: {
      chooseSwitch(item) {
        this.$axios.post('admin/wechat_official/set_auth_push', item).then((res) => {
          this.$message.success('成功');
          this.getData();
        });
      },
      getData() {
        this.$axios.post("admin/wechat_official/auth_push_list").then((res) => {
          this.listData = res.data;
        });
      },
      edit(id) {
        this.$axios.post("admin/wechat_official/get_auth_push", {id: id}).then((res) => {
          this.formData = res.data;
          this.visible = true;
        });
      },
      getData2() {
        this.$axios.post('admin/custom/page_data').then((res) => {
          let data = res.data;
          this.chooseTitleList = data.titles;
          this.imgList = data.pics;
        });
      },
      dialogAffirm() {
        this.$axios.post('admin/wechat_official/set_auth_push', this.formData).then((res) => {
          this.$message.success('成功');
          this.visible = false;
        });
      },
      dialogAffirm1() {
        this.formData.title = this.form.title;
        this.formData.content = this.form.content;
        this.textVisible = false;
      },
      editTitle() {
        this.textVisible = true;
        this.form.title = '';
        this.form.content = '';
      },
      chooseNewImg() {
        this.visibleImg = true;
      },
      chooseImage(url) {
        this.formData.image = url;
        this.visibleImg = false;
      }
    }
  }
</script>

<style scoped lang="less">
    @media screen and (max-width: 750px) {
        .card-box-item {
            width: 100% !important;
        }
    }

    .card-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;

        .card-box-item {
            width: 24%;

            .card-box-bottom {
                .hint {
                    color: #0000FF;
                    font-size: 14px;
                    line-height: 20px;
                }

                .bottom-img {
                    width: 100%;
                }

                .remark {
                    color: #FF0000;
                    font-size: 14px;
                    line-height: 20px;
                }
            }
        }

        .el-card {
            border-bottom: none;
        }
    }

    .el-footer {
        background-color: #F5F5F5;
        height: 50px !important;
        line-height: 50px;
        text-align: right;
        border: 1px solid #EBEEF5;
        border-radius: 4px;
    }

    .editBox {
        border: 10px solid #EEEEEE;
        width: 320px;
        height: 200px;
        padding: 10px;
        position: relative;

        .title {
            font-size: 16px;
            line-height: 50px;
        }

        .editImg-box {
            width: 100px;
            height: 115px;
            bottom: 0;
            right: 0;
            position: absolute;
            text-align: center;

            img {
                width: 80px;
                height: 80px;
            }
        }
    }

    .choose-img {
        display: flex;
        flex-wrap: wrap;
        /*justify-content: space-around;*/

        li {
            width: 120px;
            height: 80px;
            border: 1px solid #cccccc;
            margin: 10px;
            float: left;
            cursor: pointer;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }
</style>